<div id="panels">
    <div data-process="notifications" class="alert alert-info">
        <div data-step="1">
            {% trans %}Zulip needs your permission to
            <a class="request-desktop-notifications alert-link" role="button" tabindex=0>enable desktop notifications.</a>
            {% endtrans %}
        </div>
        <div data-step="2" style="display: none">
            {{ _('We strongly recommend enabling desktop notifications. They help Zulip keep your team connected.') }}
            <span class="buttons">
                <a class="alert-link request-desktop-notifications" role="button" tabindex=0>{{ _('Enable notifications') }}</a>
                &bull;
                <a class="alert-link exit" role="button" tabindex=0>{{ _('Ask me later') }}</a>
                &bull;
                <a class="alert-link reject-notifications" role="button" tabindex=0>{{ _('Never ask on this computer') }}</a>
            </span>
        </div>
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
    </div>
    <div data-process="email-server" class="alert alert-info red">
        <div data-step="1">
            {% trans %}Zulip needs to send email to confirm users' addresses and send notifications.{% endtrans %}
            <a class="alert-link" href="https://zulip.readthedocs.io/en/latest/production/email.html" target="_blank" rel="noopener noreferrer">
                {% trans %}See how to configure email.{% endtrans %}
            </a>
        </div>
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
    </div>
    <div data-process="profile-incomplete" class="alert alert-info">
        <div data-step="2">
            {% trans profile_link="#organization/organization-profile" %}
            Complete the
            <a class="alert-link" href="{{ profile_link }}">organization profile</a>
            to brand and explain the purpose of this Zulip organization.
            {% endtrans %}
        </div>
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
    </div>
    <div data-process="insecure-desktop-app" class="alert alert-info red">
        <div data-step="1">
            {{ _("You are using an old version of the Zulip desktop app with known security bugs.") }}
            <a class="alert-link" href="https://zulip.com/apps" target="_blank" rel="noopener noreferrer">
                {{ _("Download the latest version.") }}
            </a>
        </div>
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
    </div>
    <div data-process="bankruptcy" class="alert alert-info brankruptcy">
        <div data-step="1">
            {% trans count=page_params.unread_msgs.count %}
            Welcome back!  You have <span class="bankruptcy_unread_count">{{ count }}</span> unread messages.  Do you want to mark them all as read?
            {% endtrans %}
            <span class="buttons">
                <a class="alert-link accept-bankruptcy" role="button" tabindex=0>{{ _("Yes, please!") }}</a>
                &bull;
                <a class="alert-link exit" role="button" tabindex=0>{{ _("No, I'll catch up.") }}</a>
            </span>
        </div>
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}" role="button" tabindex=0>&times;</span>
    </div>
    <div class="alert alert-info bankruptcy-loader" style="display: none;">
        {% trans %}
        Marking all messages as read…
        {% endtrans %}
    </div>
</div>
